<template>
  <el-container>
    <!-- 正文 -->
    <el-main>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ article.category_name }}</el-breadcrumb-item>
        <el-breadcrumb-item>正文</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 文章正文 -->
      <el-card class="blogcontent">
        <div class="blogtop">
          <div class="title">{{ article.title }}</div>
          <div class="blogx">
            <i class="el-icon-user-solid"></i>
            {{ article.author }}
            <i class="el-icon-time x"></i>
            {{ article.updated_time }}
            <i class="el-icon-view"></i>
            {{ article.pageviews }}
          </div>
        </div>
        <div class="outline">
          <span><b>概要</b>:{{ article.abstract }}</span>
        </div>
        <div class="markdown-body" v-html="article.content">
          {{ article.content }}
        </div>
      </el-card>
    </el-main>
    <!-- 侧边栏 -->
    <el-aside>
      <el-card class="aside-user box-card">
        <div class="user"></div>
        <img src="../../assets/images/user.gif" class="userimg" />
        <div>{{ this.user.username }}</div>
        <div class="maxim">E-mail:{{ this.user.email }}</div>
        <div class="maxim">{{ this.user.personality }}</div>
      </el-card>
      <!-- <el-card></el-card> -->
    </el-aside>
  </el-container>
</template>
<script>
export default {
  name: 'blogcontent',
  data() {
    return {
      article: {},
      user: {},
      // category: {},
    }
  },
  created() {
    this.getArticle(), this.handleGetUser()
  },
  methods: {
    getArticle() {
      this.$http.get(`/blogcontent?id=${this.$route.query.id}`).then((res) => {
        //更新数据
        console.log(res.data.result)
        this.article = res.data.result
      })
    },
    handleGetUser() {
      this.$http.get('/fontuser/1').then((res) => {
        console.log(res)
        this.user = res.data.result
      })
    },
  },
}
</script>

<style lang="stylus">
@import "../../assets/styles/blog.styl"
.el-main
  min-width:800px
.blogcontent
  // height: 100%
  min-height: 1000px
  margin-top: 15px
  .outline
    padding: 25px 0
    text-indent: 1cm
    font-family:'楷体'
  .blogtop
    margin-top: 10px
    box-shadow: 0 5px 10px -6px rgba(0, 0, 0, 0.1)
  .title
    font-size:20px
    margin-bottom: 15px
  .blogx
    padding-bottom:15px
    font-size:12px
    color: #999
    .x
    margin-left:15px
    .outline
      margin: 15px 0 0 25px
</style>
